<template>
    <div>
        <h1>测试自定义指令</h1>
        <p v-red>小米汽车还没影子，智能手机基本盘快撑不住了。</p>
        <p v-color="`#33f03d`">小米汽车还没影子，智能手机基本盘快撑不住了。</p>

        <h1>测试常用指令</h1>
        <h3>电影评论</h3>
        <p>{{comment}}</p>
        <p v-text="comment"></p>
        <p v-html="comment"></p>
        <p>{{comment}}</p>
        <p v-pre>{{comment}}</p>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a:1,
                comment:"这和电影{{a}}好看呀!<b>吐血推荐!</b>"
            }
        },
        directives:{//定义当前组件可以使用的自定义属性
            red(el){//该指令通过：v-red来调用 执行指令方法时传入当前的DOM对象
                el.style.color = 'red'
            },
            color(el,param){
                console.log(param)
                el.style.color = param.value
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>